var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "react", "services/member", "maishu-ui-toolkit", "tips", "controls/virtual-mobile"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const React = require("react");
    const member_1 = require("services/member");
    const ui = require("maishu-ui-toolkit");
    const tips_1 = require("tips");
    const virtual_mobile_1 = require("controls/virtual-mobile");
    let allColors = ['default', 'red', 'green', 'pink', 'goldenrod'];
    class StoreStylePage extends React.Component {
        constructor(props) {
            super(props);
            this.state = {};
        }
        setCurrentStyle(name) {
            this.setState({ color: name });
        }
        save() {
            return __awaiter(this, void 0, void 0, function* () {
                let member = this.props.createService(member_1.MemberService);
                let store = yield member.getStore();
                store.Style = this.state.color;
                return member.saveStore(store);
            });
        }
        componentDidMount() {
            return __awaiter(this, void 0, void 0, function* () {
                let member = this.props.createService(member_1.MemberService);
                let store = yield member.getStore();
                this.setState({ color: store.Style });
            });
        }
        render() {
            let { color } = this.state;
            color = color || "default";
            let scale = 0.85;
            return React.createElement("div", { className: "station-store-style" },
                React.createElement("ul", { key: 10, style: { margin: 0 } },
                    React.createElement("li", { className: "pull-right" },
                        React.createElement("button", { className: "btn btn-sm btn-primary", ref: (e) => {
                                if (!e)
                                    return;
                                ui.buttonOnClick(e, () => {
                                    return this.save();
                                }, { toast: tips_1.default.saveSuccess });
                            } },
                            React.createElement("i", { className: "icon-save" }),
                            React.createElement("span", null, "\u4FDD\u5B58"))),
                    React.createElement("li", { className: "clearfix" })),
                React.createElement("hr", null),
                React.createElement("div", { className: "style-editor clearfix" },
                    React.createElement("div", { className: "style-solutions" },
                        React.createElement("span", { className: "header" }, "\u9009\u62E9\u914D\u8272\u65B9\u6848"),
                        React.createElement("ul", null, allColors.map(o => React.createElement("li", { key: o, className: o == color ? "btn-link active" : 'btn-link', onClick: () => this.setCurrentStyle(o) },
                            React.createElement("div", { className: o })))))),
                React.createElement("div", { className: `row ${color}` },
                    React.createElement("div", { className: "col-md-4", style: { textAlign: 'center' } },
                        React.createElement(virtual_mobile_1.VirtualMobile, { scale: scale, color: color, displayMobile: true, ref: e => this.homePage = e || this.homePage })),
                    React.createElement("div", { className: "col-md-4", style: { textAlign: 'center' } },
                        React.createElement(virtual_mobile_1.VirtualMobile, { scale: scale, color: color, displayMobile: true, ref: e => this.shoppingCartPage = e || this.shoppingCartPage })),
                    React.createElement("div", { className: "col-md-4", style: { textAlign: 'center' } },
                        React.createElement(virtual_mobile_1.VirtualMobile, { scale: scale, color: color, displayMobile: true, ref: e => this.productPage = e || this.productPage }))));
        }
    }
    exports.default = StoreStylePage;
});
